import {CnMediumSpan, CnNormalSpan} from './text'

/**
 * @constructor 分为上下结构
 * @desc 上为左右结构，左边主标题 右边副标题
 * @desc 下为内容，可随意添加
 */
export const CItemUpDown = defineComponent({
  props: {
    title: String,
    subTitle: String
  },
  setup(props, {slots}) {
    return () => (
      <div class=''>
        <div class='flex justify-between items-center'>
          <CnMediumSpan class='flex-1'>{props.title ? props.title : slots.title?.()}</CnMediumSpan>
          <CnNormalSpan class='text-12'>{props.subTitle}</CnNormalSpan>
        </div>
        <div class='mt-8'>{slots.default?.()}</div>
      </div>
    )
  }
})

/**
 * @constructor 分为左中右结构
 */
export const CItem = defineComponent({
  props: {
    title: String,
    subTitle: String,
    popover: String
  },
  setup(props, {slots}) {
    return () => (
      <div
        class=''
        style={{
          padding: '10px 24px 16px 30px'
        }}
      >
        <div class='h-full flex justify-between items-center'>
          {slots.title ? (
            slots.title?.()
          ) : props.title ? (
            <CnNormalSpan class='flex-1 text-text text-left'>{props.title}</CnNormalSpan>
          ) : null}
          <a-popover
            class='mx-16 justify-start'
            content={
              <CnMediumSpan>
                {slots.popover
                  ? slots.popover()
                  : props.popover
                  ? props.popover
                  : slots.default?.()}
              </CnMediumSpan>
            }
            trigger='hover'
          >
            <CnNormalSpan>{slots.default?.()}</CnNormalSpan>
          </a-popover>
          <CnNormalSpan class='ml-8 text-right'>
            {slots.subTitle ? slots.subTitle?.() : props.subTitle}
          </CnNormalSpan>
        </div>
      </div>
    )
  }
})
